.footer-wrapper {
	height: 192px;
	width: 100%;
	background-color: var(--color-bg-dark);
	position: relative;
	z-index: 0;
	transition: height 0.3s ease-in-out;
	overflow: visible;
}

.footer-container {
	margin: 0 auto !important;
	padding: 0.48rem 0.24rem;
	max-width: 12.2rem;

	.icon {
		font-size: 0.16rem;
		margin-right: 0.08rem;
	}

	.title {
		color: #8898aa;
		font-size: 0.14rem;
		margin-bottom: 0.08rem;
	}

	.link {
		font-size: 0.14rem;
		font-weight: 200;
		color: #8898aa;
		line-height: 0.3rem;
		transition: color 0.2s;

		&:hover {
			color: var(--app-aide-text);
		}
	}
}

#ViewAppFooter {
	position: relative;
	> .toggle-fold-btn {
		position: absolute;
		z-index: 1;
	}
	.footItem {
		padding: 24px 2%;
		width: 25%;
		float: left;

		div {
			margin: 6px 0;
		}

		a {
			font-weight: 200;
			color: #b3bdc1;

			&:hover {
				color: var(--color-white);
			}
		}
	}

	.copyRight {
		padding: 24px 2%;
		width: 25%;
		float: left;
		font-size: 13px;
		text-indent: 1em;

		h4 {
			font-size: 14px;
			margin: 0 auto 13px;
			font-weight: 500;
			position: relative;
			text-indent: 0;
		}
	}
}

.x-button.toggle-fold-btn.footer-toggle {
	position: fixed;
	bottom: -40px;
	right: -40px;
	opacity: 0.5;
	transform: scale(0.5);
	overflow: hidden;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	transition: 0.3s all ease-in;
	z-index: 1;

	&.unfold {
		right: 0;
		bottom: 0;
		opacity: 1;
		transform: scale(0.8);
	}

	&:hover {
		transform: scale(1);
		opacity: 1;
	}
}
